<style lang="scss" scoped>
    .mshop-tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 55px;
    }
</style>

<template>
    <div class="mshop-tabbar">
        <tabbar>
            <tabbar-item :selected="item.path == current_path" v-link="{path: item.path}" v-for="item in items">
                <img slot="icon" :src="item.src" />
                <span slot="label">{{item.label}}</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
    import Tabbar from 'vux-components/Tabbar'
    import TabbarItem from 'vux-components/Tabbar-item'
    import getters from '../../vuex/getters'
    import ShopType from '../../shop-type'

    export default {
        components: {
            Tabbar,
            TabbarItem
        },
        computed: {
            current_path () {
                let path = this.$route.path;
                if (path.indexOf('?') > 0) path = path.substr(0, path.indexOf('?'));

                return path
            }
        },
        data() {
            return {
                items: ShopType.tabbar.get_items(this.shop_type),
            }
        },
        vuex: {
            getters
        }
    }
</script>
